//@import "../../less/modules/modal";
@import "../../style/modules/function";

.modal {
    .modal-content {
        padding: 0;
        position: relative;
        overflow: visible;
        background-color: transparent;
    }

    .modal-title {
        border-top-left-radius: rpx(20);
        border-top-right-radius: rpx(20);
        padding: 0 rpx(20);
        height: rpx(100);
        display: flex;
        align-items: center;
        background-color: #f88e2d;

        .img {
            flex: 0 0 rpx(80);
            width: rpx(80);
            height: rpx(80);
            border-radius: rpx(10);
        }

        .info {
            flex: 1;
            height: rpx(80);
            font-size: rpx(26);
            line-height: 1.2;
            padding-left: rpx(20);
            color: #fff;
            padding-top: rpx(5);
            display: flex;
            align-items: center;

            .com-name {
                padding-top: rpx(5);
                font-size: rpx(20);
            }
        }

        .btn {
            flex: 0 0 rpx(160);
            height: rpx(55);
            line-height: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #fff;
            background: transparent;
            font-size: rpx(24);
            color: #fff;
            border-radius: rpx(30);

            &.button-hover {
                background-color: #fff;
                color: #f88e2d;
            }
        }
    }

    .wl-content {
        max-height: 50vh;
        background-color: #fff;
        border-bottom-left-radius: rpx(20);
        border-bottom-right-radius: rpx(20);
        font-size: 14px;
        padding: 15px;
        overflow-y: auto;

        .item {
            display: flex;
            color: #666;

            .time {
                color: #666;
                font-size: 10px;
                flex: 0 0 50px;
                padding-right: 20px;
                display: flex;
                align-items: center;
                justify-content: center;
                text-align: center;
            }

            .text-content {
                position: relative;
                z-index: 10;
                padding: rpx(25) 0 rpx(25) 20px;
                flex: 1;
                border-left: 1px solid #eee;
                overflow: visible;
                line-height: 1.4;

                &:after {
                    content: '';
                    position: absolute;
                    z-index: 10;
                    left: rpx(-20);
                    top: 50%;
                    width: rpx(40);
                    height: rpx(40);
                    margin-top: rpx(-20);
                    display: block;
                    background: #fff url("https://laikang.oss-cn-beijing.aliyuncs.com/iqx/icon/wuliu.svg") no-repeat center center;
                    background-size: 100%;
                }
            }

            &:first-child {
                .text-content {
                    &:after {
                        background: #fff url("https://laikang.oss-cn-beijing.aliyuncs.com/iqx/icon/wuliu-active.svg") no-repeat center center;
                        background-size: 100%;
                    }
                }
            }
        }
    }

    .close-btn {
        padding: rpx(15) 0;
        text-align: center;
        width: 100%;
    }
}
